<template>
  <div class="activity-body">
    <div class="activity-ad"></div>
    <div class="activity-wrap">
      <div class="rule-box ">
        <img src="./img/denglong1.png" class="denglong1" alt="">
        <img src="./img/yun1.png" class="yun1" alt="">
        <div class="rule-content" style="height: 400px;">
          <div class="rule-title">
            <p>一重礼</p>
            <p>全场降点</p>
          </div>
          <div class="line">
            <div class="del">
              <div class="flagb"></div>
              <div class="flag">2个点</div>
              <div class="tip1">无门槛</div>
              <div class="tip2">全场采购额</div>
            </div>
            <div class="del">
              <div class="flagb"></div>
              <div class="flag">3个点</div>
              <div class="tip1">1000元</div>
              <div class="tip2">优刃采购额</div>
            </div>
            <div class="del">
              <div class="flagb"></div>
              <div class="flag">4个点</div>
              <div class="tip1">10000元</div>
              <div class="tip2">优刃采购额</div>
            </div>
            <div class="del">
              <div class="flagb"></div>
              <div class="flag">5个点</div>
              <div class="tip1">50000元</div>
              <div class="tip2">优刃采购额</div>
            </div>
          </div>
        </div>
        <div class="rule-foot"></div>
      </div>
      <div class="rule-box ">
        <img src="./img/denglong2.png" class="denglong2" alt="">
        <img src="./img/yun2.png" class="yun2" alt="">
        <div class="rule-content" style="height: 822px;">
          <div class="rule-title">
            <p>二重礼</p>
            <p>优刃预付20%</p>
          </div>
          <div class="rules">
            <div class="rule1">
              <div class="rp1">满10000元 优惠4个点</div>
              <div class="rp2">预付20%货款</div>
            </div>
            <div class="rule2">
              <div class="rp1">满50000元 优惠5个点</div>
              <div class="rp2">预付20%货款</div>
            </div>
            <div class="r-btn" @click="jump('JanuaryYourenField')">优刃专区</div>
            <div class="r-tip">
              <span class="b">4月30日</span>开始将会有刀具联盟工作者主动联系您<span class="b">交齐余款</span>或者支持无条件部分<span class="b">退货退款</span>
            </div>
          </div>
        </div>
        <div class="rule-foot"></div>
      </div>
      <div class="rule-box ">
        <img src="./img/yun3.png" class="yun3" alt="">
        <div class="rule-content" style="height: 410px">
          <div class="rule-title">
            <p class="single">活动规则</p>
          </div>
          <div class="p-rules">
            <p class="p2">1、活动期间，全场商品享受降点，优刃不参与降点。</p>
            <p class="p2">2、VIP用户本次活动采购金额不累计到会员体系返点中。</p>
            <p class="p2">3、注：所有含有优刃商品的订单都需含税购买。</p>
            <p class="p2">4、活动最终解释权归刀具联盟所有。</p>
          </div>
          <img src="./img/gu.png" class="gu" alt="">
        </div>
        <div class="rule-foot"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    jump (name) {
      this.$router.push(name)
    }
  }
}
</script>

<style lang="scss" scoped>
.activity-body{
  background-color: #ffdbd9;
  padding-bottom: 30px;
}
.activity-wrap{
  width: 1150px;
  margin: 0 auto;
  }
.activity-ad{
  width: 100%;
  height: 600px;
  background-image: url("./img/newyear.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
}
  .rule-box{
    margin-top: 30px;
    border-radius: 6px;
    // overflow: hidden;
    padding-top: 8px;
    position: relative;
    .denglong1{
      position: absolute;
      width: 87px;
      left: -87px;
      top: 62px;
    }
    .yun1{
      position: absolute;
      width: 104px;
      right: -104px;
      top: 312px;
    }
    .denglong2{
      position: absolute;
      width: 100px;
      right: -100px;
      top: 135px;
    }
    .yun2{
      position: absolute;
      width: 143px;
      left: -205px;
      top: 572px;
    }
    .yun3{
      position: absolute;
      width: 93px;
      right: -132px;
      top: 254px;
    }
    .rule-content{
      width: 100%;
      box-sizing: border-box;
      padding: 30px;
      padding-top: 0;
      display: inline-block;
      background:rgba(250,245,240,1);
      box-shadow:0px 0px 12px 0px rgba(253,149,149,1);
      font-size: 14px;
      border-radius: 6px 6px 0 0 / 6px 6px 0 0;
      // 一重礼进度条
      .line{
        width:1000px;
        height:4px;
        margin: 133px auto 0;
        background:rgba(219,44,37,1);
        border-radius:4px;
        position: relative;
        .del{
          width:12px;
          height:12px;
          background:rgba(219,44,37,1);
          position: absolute;
          top: -4px;
          border-radius: 6px;
          .flagb{
            width:2px;
            height:50px;
            background:rgba(76,72,72,1);
            position: absolute;
            top: -50px;
            left: 5px;
          }
          .flag{
            width:58px;
            height:26px;
            line-height: 26px;
            text-align: center;
            background:rgba(249,48,49,1);
            border-radius:0px 4px 4px 0px;
            border:1px solid rgba(219,3,3,1);
            position: absolute;
            top: -50px;
            color: #fff;
            left: 7px;
          }
          .tip1{
            display: inline-block;
            box-sizing: border-box;
            position: absolute;
            left: -28px;
            top: 22px;
            width:66px;
            height:24px;
            line-height: 22px;
            text-align: center;
            font-size: 16px;
            color: #EB7B00;
            border: 1px solid #EB7B00;
            box-shadow: 0 0 1px 1px #EB7B00;
            border-radius: 1px;
          }
          .tip2{
            display: inline-block;
            box-sizing: border-box;
            position: absolute;
            left: -28px;
            top: 50px;
            width:66px;
            height:24px;
            line-height: 24px;
            text-align: center;
            font-size: 12px;
            color: #666666;
          }
          &:nth-of-type(1){
            left: 0;
            .tip1,.tip2{
              left: 4px;
            }
          }
          &:nth-of-type(2){
            left: 33%;
          }
          &:nth-of-type(3){
            left: 66%;
          }
          &:nth-of-type(4){
            left: 99%;
            .flag{
              line-height: 26px;
              text-align: center;
              background:rgba(249,48,49,1);
              border-radius:4px 0px 0px 4px;
              border:1px solid rgba(219,3,3,1);
              position: absolute;
              top: -50px;
              color: #fff;
              left: auto;
              right: 7px;
            }
            .tip1,.tip2{
              left: auto;
              right: 4px;
            }
          }
        }
      }
      // 二重礼box
      .rules{
        margin-top: 80px;
        text-align: center;
        .rule1,.rule2{
          display: inline-block;
          width: 520px;
          height: 350px;
          margin: 0 auto;
          background-image: url(./img/box1.png);
          background-size: 100% 100%;
          position: relative;
          .rp1{
            font-size:22px;
            color: #666666;
            position: absolute;
            top: 165px;
            right: 66px;
          }
          .rp2{
            font-size:34px;
            color: #C11A09;
            position: absolute;
            top: 210px;
            right: 66px;
          }
        }
        .r-btn{
          width:363px;
          height:60px;
          line-height: 60px;
          font-size: 20px;
          color: #fff;
          background:linear-gradient(180deg,rgba(248,143,104,1) 0%,rgba(238,86,55,1) 100%);
          border-radius:6px;
          margin: 60px auto 0;
          cursor: pointer;
        }
        .r-tip{
          color: #999999;
          font-size: 14px;
          margin-top: 40px;
          .b{
            color: #666666;
          }
        }
      }
      .rule-title{
        width: 150px;
        height: 78px;
        line-height: 28px;
        color: #fff;
        background-image: url(./img/head.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;
        position: relative;
        top: -8px;
        text-align: center;
        padding: 12px 21px;
        p:nth-of-type(1){
          font-size: 20px;
        }
        p:nth-of-type(2){
          font-size: 15px;
        }
        .single{
          line-height: 50px;
        }
      }
      .p-rules{
        width: 500px;
        display: inline-block;
        padding-left: 66px;
        padding-top: 75px;
        .p2{
          color: #333333;
          line-height: 30px;
        }
      }
      .gu{
        width: 211px;
        position: absolute;
        top: 125px;
        right: 141px;
      }
    }
    .rule-foot{
      background-color: #E83C2B;
      height: 5px;
      border-radius: 0 0 6px 6px / 0 0 6px 6px;
    }
  }
</style>
